// 4、受控组件、非受控组件
import './Four.css'

import React, {Component,createRef} from 'react';

class Four extends Component {
    // 使用ref方法，创建一个存放DOM元素的容器
    msgRef = createRef()

    // 定义状态
    state = {
        message: 'hello',
        message2:''
    }
    changeMessage = (e) => {
        this.setState({
            message: e.target.value
        })
    }
    getMessage = () => {
        this.setState({
            message2 : this.msgRef.current.value
        })
        console.log(this.msgRef.current.value)
    }

    render() {
        let {message,message2} = this.state;
        return (
            <div className='four'>
                <h2>Four</h2>
                <h2>受控组件</h2>
                <p>
                    {/* 定义状态跟表单元素的value属性绑定，通过onChange事件更新状态 */}
                    请说:<input type="text" value={message} onChange={this.changeMessage}/>
                </p>

                <h2>非受控组件</h2>
                <p>
                    {/* 使用ref属性将DOM元素跟ref对象进行关联,之后就可以通过操作ref对象的方式去操作DOM元素 */}
                    请说:<input ref={this.msgRef} type="text"/>
                    <button onClick={this.getMessage}>获取数据</button>
                    <span>{message2}</span>
                </p>
            </div>
        );
    }
}

export default Four;
